import {Card, Form, Input, Button} from 'antd'
import { UserOutlined, LockOutlined } from '@ant-design/icons';
import logo from '@/assets/logo.svg'
import './index.scss'
import {useStore} from '@/store'
import {useNavigate} from 'react-router-dom'

const Login = () => {
    const {loginStore} = useStore()
    const navigate = useNavigate()

    const onFinish = async(values) => {
        const { username, password } = values
        await loginStore.login({ username, password })
        navigate("/", {replace: true})
    };
    
    const onFinishFailed = (errorInfo) => {
        console.log('Failed:', errorInfo);
    };
    return(
        <div className="login">
            <Card className="login-container">
                <img className="login-logo" src={logo} alt="" />
                <Form
                    name="login"
                    className="login-form"
                    onFinish={onFinish}
                    onFinishFailed={onFinishFailed}
                    autoComplete="off"
                >
                    <Form.Item name="username" rules={[{ required: true, message: '请输入用户名!' }]}>
                        <Input prefix={<UserOutlined className="site-form-item-icon" />} size="large" placeholder="请输入用户名" />
                    </Form.Item>
                    <Form.Item name="password" rules={[{ required: true, message: '请输入密码!' }]}>
                        <Input.Password autoComplete="true" prefix={<LockOutlined className="site-form-item-icon" />} size="large" placeholder="请输入密码" />
                    </Form.Item>
                    <Form.Item>
                        <Button type="primary" htmlType="submit" size="large" block>
                        登录
                        </Button>
                    </Form.Item>
                </Form>
            </Card>
        </div>
    )
}

export default Login